<template>
  <header class="navbar">
    <!-- 品牌 logo 图片 -->
    <div class="navbar-brand">
      <router-link to="/">
        <img alt="Vue logo" src="../assets/logo.png" class="logo" >
      </router-link>
      <img alt="company logo" src="../assets/company.jpg" class="company" >
    </div>

    <!--<button class="toggle-button" @click="toggleMenu">-->
      <!--☰ &lt;!&ndash; 折叠按钮图标 &ndash;&gt;-->
    <!--</button>-->

    <div class="navbar-menu-container">
      <div class="navbar-menu">
        <div class="search-button-wrapper">
          <input type="text" v-model="searchKeyword" class="search-input" :placeholder="t('PlaceHolder')">
          <button @click="handleSearch" class="navbar-item">{{ t('Search') }}</button>
        </div>
        <div class="other">
          <router-link to="/company" class="navbar-item">{{ t('About Us') }}</router-link>
          <router-link to="/contact" class="navbar-item">{{ t('Contact Us') }}</router-link>
          <button class="language-button" @click="handleLocaleChange('en')">EN</button>
          <button class="language-button" @click="handleLocaleChange('zh-CN')">中文</button>
        </div>
      </div>
    </div>
  </header>
  <AppMenu/>
</template>

<script>
import {computed,inject, ref} from 'vue';
import AppMenu from "@/components/AppMenu.vue";
import { useRouter } from 'vue-router'; // 导入 useRouter


export default {
  components: {
    AppMenu
  },
  props: {
    fetchProductData: {
      type: Function,
      required: false
    }
  },
  setup(props) {
    const currentLocale = inject('locale');
    const changeLocale = inject('setLocale');
    // 控制菜单的显示状态
    // const isMenuOpen = ref(false);
    console.log("navbar props:", currentLocale)
    const locales = {
      'en': {
        'Name': 'Shanghai Yinglan Printing Technology Company',
        'About Us': 'Company',
        'Search': 'Search',
        'Contact Us': 'Contact',
        'PlaceHolder': 'Please enter the brand or product name'
      },
      'zh-CN': {
        'Name': '上海盈岚印刷科技有限公司',
        'About Us': '公司简介',
        'Search': '搜索',
        'Contact Us': '联系我们',
        'PlaceHolder': '请输入品牌或者商品名称'
      }
    };

    const menuItems = computed(() => {
      return locales[currentLocale.value]; // 注意使用 .value 访问响应式引用的值
    });

    function t(key) {
      return locales[currentLocale.value][key] || key;
    }

    // 使用 changeLocale 方法来切换语言
    function handleLocaleChange(locale) {
      if (changeLocale) {
        changeLocale(locale);
      }
      if (props.fetchProductData) {
        props.fetchProductData();
      }
    }

    // 切换菜单显示状态
    // function toggleMenu() {
    //   isMenuOpen.value = !isMenuOpen.value;
    // }

    const searchKeyword = ref(''); // 用户输入的搜索关键字

    function submitSearch() {
      // 清空搜索框内容
      const content = searchKeyword.value;

      console.log("content:", content)
      // 如果搜索框内容为空，则不进行路由跳转
      if (!content) {
        return '';
      }
      const route = {
        name: 'searchResult', // 路由名称，需在路由中定义
        params: {keyWord: content.trim()}
      };

      searchKeyword.value = '';

      return route;
    }

    const router = useRouter(); // 获取 Vue Router 实例

    async function handleSearch() {
      const route = submitSearch();

      router.replace({ name: route.name, params: route.params });

      // 等待数据获取完成
      if (props.fetchProductData) {
        await props.fetchProductData();
      }
    }


    return { currentLocale, t, changeLocale, menuItems, handleLocaleChange,
       searchKeyword, handleSearch };
  }
};
</script>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  /*background-image: url('../assets/background.jpg'); !* 背景图片路径 *!*/
  background-size: cover; /* 让背景图片充满整个导航栏 */
  background-repeat: no-repeat; /* 不重复平铺背景图片 */
  background-color: #92a7cb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #333;
}
.navbar-brand {
  display: flex;
  align-items: center; /* 将图像和文本垂直居中 */
}

.navbar-brand img {
  height: 4rem;
  margin-right: 1rem; /* 调整 logo 和文本之间的间距 */
}
.navbar-brand .logo{
  width: 4rem;
  height: 4rem;
}
.navbar-brand .company{
  width: 15rem;
  height: 4rem;
}

.navbar-menu-container {
  display: flex;
  align-items: center; /* 使菜单和语言按钮在垂直方向上对齐 */
}

.navbar-menu {
  display: flex;
  /*align-items: center;*/
  justify-content: flex-end;
}

.navbar-item {
  width: 5rem;
  /*height: 2rem;*/
  margin-right: 2rem; /* 增加右侧间距 */
  padding: 1rem 0.8rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.3s ease;
  border-radius: 5px;
  border: 2px solid #c0c0c0; /* 添加边框 */
  color: #fff;
  /*background-color: #f0f0f0;*/
  background: #bdcbda;
}

.navbar-item:hover {
  color: #007bff;
  background-color: #f0f0f0;
}

.navbar-item.active {
  color: #007bff;
  background-color: #f0f0f0;
  border-bottom: 2px solid #007bff;
}

.toggle-button {
  display: none; /* 初始隐藏 */
  font-size: 2rem;
  border: none;
  background: none;
  cursor: pointer;
}

.language-button {
  /*width: 6rem; !* 固定宽度 *!*/
  height: 3rem; /* 固定高度 */
  border: 2px solid #c0c0c0; /* 添加边框 */
  background: transparent; /* 透明背景 */
  color: #fff;
  font-size: 1.3rem;
  padding: 0.5rem 1rem; /* 统一内边距 */
  margin-left: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 添加过渡效果 */
  border-radius: 5px;
}

.language-button:hover {
  background-color: #007bff; /* 鼠标悬停时改变背景色 */
  color: #fff; /* 鼠标悬停时改变文字颜色 */
}

.language-button:focus {
  outline: none; /* 移除点击时的外边框 */
}

.search-input {
  margin-right: 2rem; /* 增加右侧间距 */
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  border-radius: 5px;
  border: 2px solid #c0c0c0; /* 添加边框 */
  color: #fff; /* 将字体颜色修改为白色 */
  background: transparent; /* 透明背景 */
}

.search-input::placeholder {
  color: #fff; /* 设置 placeholder 字体颜色为白色 */
}


@media (max-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }
  .navbar-brand img {
    height: 1rem;
    margin-right: 1rem; /* 调整 logo 和文本之间的间距 */
  }
  .navbar-brand .logo{
    width: 3rem;
    height: 3rem;
  }
  .navbar-brand .company{
    width: 10rem;
    height: 3rem;
  }

  .navbar-menu {
    display: flex;
    flex-wrap: wrap; /* 允许内容换行 */
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
  }

  .navbar-menu {
    display: flex; /* 显示菜单 */
    max-height: 50rem;
  }

  .search-input {
    width: 13rem; /* 设置搜索框宽度，减去按钮宽度 */
    margin-right: 1rem; /* 调整搜索框右侧间距 */
    padding: 0.5rem 0.4rem;

  }
  .navbar-item {
    width: auto; /* 设置自动宽度，适应内容 */
    margin-right: 1rem; /* 增加右侧间距 */
    padding: 0.4rem 0.4rem;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
    border-radius: 5px;
    border: 2px solid #c0c0c0; /* 添加边框 */
    color: #fff;
    /*background-color: #f0f0f0;*/
    background: #bdcbda;
  }
  .search-button-wrapper .other {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* 内容靠左 */
    align-items: center; /* 垂直居中 */
    margin-right: 10px;
  }

  .language-button {
    /*width: 3rem; !* 固定宽度 *!*/
    /*height: 3rem; !* 固定高度 *!*/
    border: 2px solid #c0c0c0; /* 添加边框 */
    background: transparent; /* 透明背景 */
    color: #fff;
    font-size: 0.8rem;
    padding: 0.5rem 1rem; /* 统一内边距 */
    margin-left: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 添加过渡效果 */
    border-radius: 5px;
  }

}

</style>
